<template>
    <div>
        <van-field
                readonly
                :name="name"
                :required="required"
                v-model="selected"
                :label="label"
                :placeholder="placeholder"
                :border="border"
                :rules="selectRule"
                @click="openSelection">
        </van-field>

        <van-popup v-model="show" bind:close="onClose" position="bottom">
            <van-picker show-toolbar :columns="selections" @cancel="onClose" @confirm="onSelect" />
        </van-popup>
    </div>
</template>

<script>

    export default {
        name: "AppDate",
        props:{
            display:{
                type:String,
                default:'inline-block',
                required:false
            },
            placeholder:{
                type:String,
                default:'请选择',
                required:false
            },
            label:{
                type:String,
                default:'',
                required:false
            },
            value:{
                type:String,
                required:false
            },
            border:{
                type:Boolean,
                default:false,
                required:false
            },
            dict:{
                type:Array,
                default:()=>[],
                required:true
            },
            name:{
                type:String,
                default:'',
                required:false
            },
            required:{
                type:Boolean,
                default:false,
                required:false
            }

        },
        data(){
            return {
                show:false,
                selected:'',
                selections:[]

            }
        },
        watch:{
            value:{
                immediate:true,
                handler(val){
                  if(!val){
                    this.selected = ''
                }else{
                  this.dict.map(item=>{
                    if(item.value == val){
                      this.selected = item.text;
                    }
                  })
                }
              }
            },
            dict(){
                this.initSelections();
            }
        },
        created(){
            this.initSelections();
        },
        computed:{
            selectRule(){
                if(this.required===true){
                    return [{ required: true, message: `请选择${this.label}`}]
                }else{
                    return [];
                }
            }
        },
        methods:{
            onClose(){
                this.show = false
            },
            initSelections(){
                let arr = [];
                this.dict.map(item=>{
                    arr.push(item.text)
                });
                this.selections = arr
            },
            onSelect(text){
                this.selected = text;
                let backString = '';
                this.dict.map(item=>{
                    if(item.text == text){
                        backString = item.value
                    }
                });
                this.$emit('change',backString);
                this.show = false
            },
            openSelection(){
                this.show = true
            }
        },
        model: {
            prop: 'value',
            event: 'change'
        }
    }
</script>

<style scoped>

</style>